<template>
    <el-row :gutter="10" class="row">
        <el-col :span="24">
            <div class="cell">
                <div class="cell-select">
                    <el-select v-model="selectType" placeholder="请选择类型" size="large" style="width: 100%" @change="initStatistics">
                        <el-option label="全部" value="all" />
                        <el-option label="当年" value="year" />
                        <el-option label="当月" value="month" />
                    </el-select>
                </div>
                <div id="scoreStatistics"></div>
            </div>
        </el-col>
    </el-row>
    <!-- <el-row :gutter="10" class="row">
        <el-col :span="12">
            <div class="cell" id="yearScore"></div>
        </el-col>
        <el-col :span="12">
            <div class="cell" id="monthScore"></div>
        </el-col>
    </el-row>
    <el-row :gutter="10" class="row">
        <el-col :span="8">
            <div class="cell" id="allPassRate"></div>
        </el-col>
        <el-col :span="8">
            <div class="cell" id="yearPassRate"></div>
        </el-col>
        <el-col :span="8">
            <div class="cell" id="monthPassRate"></div>
        </el-col>
    </el-row> -->
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref, inject } from "vue";
import { Bar, disposeChart, type ECharts } from "@/utils/echarts";

//获取自定义全局方法
const { http } = inject<any>("method");

//选择类型
const selectType = ref("year");

//ECharts图实例
const scoreStatisticsInstance = ref<ECharts | null>();

//初始化数据
const initStatistics = async (value: string) => {
    disposeChart(scoreStatisticsInstance.value!);
    const data = await http.get("home/statisticsCurrentUser", { type: value });
    if (data?.data) {
        scoreStatisticsInstance.value = Bar.statistics({
            id: "scoreStatistics",
            data: data.data.map((item: any) => item.time),
            score: data.data.map((item: any) => item.score),
            total: data.data.map((item: any) => item.total),
            average: data.data.map((item: any) => item.average),
            passed: data.data.map((item: any) => item.passed),
            title: data.title,
            subtext: data.subtext,
        } as StatisticsOptions);
    }
};

//挂载时执行
onMounted(() => initStatistics(selectType.value));

//销毁时执行
onBeforeUnmount(() => {
    disposeChart(scoreStatisticsInstance.value!);
});
</script>

<style scoped lang="less">
.row {
    margin-top: 10px;
    .cell {
        width: 100%;
        height: calc(100vh - 60px - 223.5px - 20px);
        border-radius: 10px;
        background-color: rgba(67, 67, 67, 0);
        border: 1px solid rgba(74, 74, 74, 0.2);
        position: relative;
        .cell-select {
            width: 250px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0);
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 0;
            transition: opacity 0.8s ease;
        }
        .cell-select:hover {
            opacity: 1;
        }
    }
}
#scoreStatistics {
    width: 100%;
    height: 100%;
    min-height: 50px;
}
</style>
